<template>
<div>
  <Modal v-model="mapMarkerForCommunityModal" title="社区中心点选取" fullscreen  @on-ok="mapMarkerForCommunityConfirm">
    <div id="HTmapMarkerForCommunity"></div>
  </Modal>
</div>
</template>

<script>
import { newGetCompanyInfo } from '../../../../api/z-new-grid'
import { HTgetCenter, HTgetZoom } from '../../../../libs/HT-map-Util'
import { mapHTUrl } from '../../../../libs/mapTypeUtil'
// import { tiledMapLayer } from '@supermap/iclient-leaflet'

export default {
  name: 'HTMapMarkerForCommunity',
  data () {
    return {
      mapMarkerForCommunityModal: false,
      choiceInfo: {},
      companyInfo: {},
      returnObject: {},
      map: null,
      // url: 'http://124.95.134.62:8195/portalproxy/8yxaiziw/iserver/services/map-agscache-TuCeng/rest/maps/%E5%9B%BE%E5%B1%82?key=hvLjfz41XGTXMqg5XJA0RllL',
      // url: 'http://59.197.228.131:8195/portalproxy/8ip34l19/iserver/services/map-ErWeiDiTu11-24/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE2022.11.17?key=BaNmpRn9Ur8aFRBnfRrZYg3v',
      // url: 'http://59.197.228.131:8195/portalproxy/m3cw1qye/iserver/services/map-ErWeiDiTu20221124/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE20221124?key=y5Hd3UxzzhxSu91T8VM9LY9A',
      // url: 'https://ztcmap.tripln.top/portalproxy/2qnzt9re/iserver/services/map-ugcv5-ShenYangPeiTu/rest/maps/%E6%B2%88%E9%98%B3%E9%85%8D%E5%9B%BE?key=ftrH5IEH3GXpHCRJRI2K5lYV',
      url: mapHTUrl(),
      centerMarker: {},
      resultLatLng: {}
    }
  },
  methods: {
    init (e1, e2) {
      this.choiceInfo = e1
      this.companyInfo = e2
      this.newGetCompanyInfo()
    },
    newGetCompanyInfo () {
      let data = {
        id: this.companyInfo.id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.companyInfo = ret.data.data
          this.dispostData()
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    dispostData () {
      if (this.companyInfo.csc_mapjson === undefined || this.companyInfo.csc_mapjson === '') {
        this.operationType = 'create'
        this.$Notice.error({ title: '未设置中心点！', desc: '将使用默认坐标展示！' })
        this.$set(this.companyInfo, 'csc_mapjson_ht', '41.803408523469855,123.40643097319376')
      } else {
        this.operationType = 'update'
      }
      this.mapMarkerForCommunityModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(HTgetCenter(_this.choiceInfo, _this))
      }, 1000)
    },
    initMap (e) {
      this.map = L.map('HTmapMarkerForCommunity', {
        crs: L.CRS.EPSG4326,
        preferCanvas: true,
        center: e,
        maxZoom: 19,
        minZoom: 9,
        zoom: 3,
        logoControl: false
      })
      L.supermap.tiledMapLayer(this.url).addTo(this.map)
      this.createMaker(HTgetCenter(this.companyInfo, this))
      this.map.setView(HTgetCenter(this.companyInfo, this), HTgetZoom(this.companyInfo) - 1)
    },
    createMaker (latlng) {
      // const greenIcon = L.icon({
      //   iconUrl: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
      //   iconSize: [25, 40]
      // })
      this.centerMarker = L.marker(latlng, {
      }).addTo(this.map)
      let _this = this
      _this.map.on('click', function (e) {
        var lat = e.latlng.lat
        var lng = e.latlng.lng
        _this.centerMarker.setLatLng([lat, lng])
        _this.resultLatLng = _this.centerMarker.getLatLng().lat + ',' + _this.centerMarker.getLatLng().lng
      })
      // let layer = this.centerMarker
      // layer.pm.enable({
      //   allowSelfIntersection: false
      // })
      // layer.on('pm:edit', e => {
      //   this.resultLatLng = e.target._latlng
      // })
    },
    mapMarkerForCommunityConfirm () {
      let cscmapjson = this.resultLatLng
      this.$set(this.returnObject, 'csc_mapjson_ht', cscmapjson)
      this.$emit('HTreturnMapMarkerInfoCommunity', this.returnObject)
    }
  },
  beforeDestroy () {
    this.map && this.map.remove()
  },
  watch: {
    mapMarkerForCommunityModal (val) {
      if (!val) {
        this.map && this.map.remove()
      }
    }
  }
}
</script>

<style scoped>
#HTmapMarkerForCommunity {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 900px;
}
/*/deep/ .leaflet-top{*/
/*  top: 85%;*/
/*}*/
/deep/ .leaflet-top{
  top: 85%;
}
</style>
